<template>
  <div class="captain">
    <!--电核主管-->
    <div class="data_list">
      <el-table :data="tableData" :max-height="tableMaxHeight" style="width: 100%">
        <el-table-column align="left" label="序号" prop="id" :label="$t('common.serialNumber')">序号</el-table-column>
        <el-table-column align="left" label="账号名称" prop="userName" :label="$t('common.accountName')"></el-table-column>
        <el-table-column align="left" label="角色类型" prop="typeIdName" :label="$t('common.roleType')">
          <template slot-scope="scope">{{ $root.local == 'zhCN' ? scope.row.roleName : scope.row.typeIdName}}</template>
        </el-table-column>
        <el-table-column align="left" label="剩余单量" prop="remainOrderCount" :label="$t('authority.remainingOrder')"></el-table-column>
        <el-table-column align="left" label="管理人员数" prop="userCount" :label="$t('authority.managePerson')"></el-table-column>
      </el-table><!--end table-->
    </div>

    <pagination @pageChange="pageChange" :page="page">分页组件</pagination>

  </div>
</template>

<script>
  import Pagination from '@/components/pagination';
  import mixin from '@/service/mixin';

  export default {
    name: 'customManage',
    props: {
      activeTab: {
        type: String,
        required: true
      },
      searchForm: {
        type: Object,
        required: true
      }
    },
    components: {
      Pagination
    },
    mixins: [mixin],
    data() {
      return {
        thisRoleType: 2,
        isListening: false
      };
    },
    watch: {
      activeTab(val) {
        if ('customManage' === val) {
          this.page.currentPage = 1;
          this.getTableData();
        }
      },
      'searchForm.search'(val) {
        if (val && this.activeTab === 'customManage') {
          this.page.currentPage = 1;
          this.getTableData();
        }
      }
    },
    methods: {
      getTableData(page = this.page) {
        const params = {
          roleId: this.thisRoleType,
          userName: this.searchForm.userName,
          leaderId: '',
          page: {
            pageNo: page.currentPage,
            pageSize: this.page.pageSize
          }
        };
        this.$api.tel.getAllUserInfo(params).then((res) => {
          const { status, data, error } = res;
          if ('1' === status && '00000000' === error) {
            this.tableData = data.data;
            this.page.pageCount = data.pageCount;
            if (this.searchForm.search) {
              this.$emit('search', this.searchForm);
            }
            this.tableMaxHeight = window.document.body.clientHeight - 265;
          }
        });
      }
    },
    created() {
      if (this.activeTab === 'customManage') {
        this.getTableData();
      }
    }
  };
</script>

<style lang="scss" scoped>
  .data_list{
    background-color: #fff;
    padding: 10px 16px;
  }
</style>
